// Pirms:
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

// Pēc:
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render();

import { Suspense } from 'react';

function MyComponent() {
 const data = fetchData(); // Pieņemsim, ka fetchData() atgriež Promise līdzīgu objektu
 return (
  

   
{data.title}
   
{data.description}
  
 );
}

function App() {
 return (
  Loading...

Šajā piemērā `MyComponent` komponents mēģina nolasīt datus no `fetchData` funkcijas. Ja dati vēl nav pieejami, komponents "apturēs" renderēšanu, un `Suspense` komponents parādīs rezerves UI (šajā gadījumā "Loading..."). Tiklīdz dati būs pieejami, komponents atsāks renderēšanu.

Izmantojot Transitions nesteidzamiem atjauninājumiem

Izmantojiet Transitions, lai atzīmētu atjauninājumus, kas nav steidzami. Tas ļauj React prioritizēt lietotāja ievadi un citus svarīgus uzdevumus. Jūs varat izmantot `useTransition` hook, lai izveidotu pārejas.

import { useState, useTransition } from 'react';

function MyComponent() {
 const [isPending, startTransition] = useTransition();
 const [value, setValue] = useState('');

 const handleChange = (e) => {
  startTransition(() => {
   setValue(e.target.value);
  });
 };

 return (
  

   
   
Value: {value}
   {isPending && 
Updating...
}
  
 );
}

export default MyComponent;

Šajā piemērā `handleChange` funkcija izmanto `startTransition`, lai atjauninātu `value` stāvokli. Tas norāda React, ka atjauninājums nav steidzams un to var deprioritizēt, ja nepieciešams. `isPending` stāvoklis norāda, vai pāreja pašlaik notiek.

Praktiski piemēri un lietošanas gadījumi

Concurrent Mode ir īpaši noderīgs lietojumprogrammās ar:

• Sarežģītām lietotāja saskarnēm: Lietojumprogrammas ar daudziem interaktīviem elementiem un biežiem atjauninājumiem var gūt labumu no uzlabotās Concurrent Mode atsaucības.
• Datu ietilpīgām operācijām: Lietojumprogrammas, kas ielādē lielus datu apjomus vai veic sarežģītus aprēķinus, var izmantot Suspense un Transitions, lai nodrošinātu plūstošāku lietotāja pieredzi.
• Reāllaika atjauninājumiem: Lietojumprogrammas, kurām nepieciešami reāllaika atjauninājumi, piemēram, tērzēšanas lietojumprogrammas vai akciju cenu rādītāji, var izmantot Concurrent Mode, lai nodrošinātu, ka atjauninājumi tiek parādīti nekavējoties.

1. piemērs: E-komercijas produktu filtrēšana

Iedomājieties e-komercijas vietni ar tūkstošiem produktu. Kad lietotājs piemēro filtrus (piemēram, cenu diapazons, zīmols, krāsa), lietojumprogrammai ir jāpārrenderē produktu saraksts. Legacy Mode režīmā tas varētu izraisīt manāmu aizkavēšanos. Ar Concurrent Mode filtrēšanas operāciju var atzīmēt kā "transition", ļaujot React prioritizēt lietotāja ievadi un uzturēt UI atsaucīgu. Suspense var izmantot, lai parādītu ielādes indikatoru, kamēr filtrētie produkti tiek ielādēti no servera.

2. piemērs: Interaktīva datu vizualizācija

Apsveriet datu vizualizācijas lietojumprogrammu, kas attēlo sarežģītu diagrammu ar tūkstošiem datu punktu. Kad lietotājs pietuvina vai pārvieto diagrammu, lietojumprogrammai ir jāpārrenderē diagramma ar atjauninātajiem datiem. Ar Concurrent Mode tuvināšanas un pārvietošanas operācijas var atzīmēt kā "transitions", ļaujot React prioritizēt lietotāja ievadi un nodrošināt plūstošu un interaktīvu pieredzi. Suspense var izmantot, lai parādītu vietturi, kamēr diagramma tiek pārrenderēta.

3. piemērs: Kopīga dokumentu rediģēšana

Kopīgas dokumentu rediģēšanas lietojumprogrammā vairāki lietotāji var vienlaikus rediģēt vienu un to pašu dokumentu. Tam nepieciešami reāllaika atjauninājumi, lai nodrošinātu, ka visi lietotāji redz jaunākās izmaiņas. Ar Concurrent Mode atjauninājumus var prioritizēt, pamatojoties uz to steidzamību, nodrošinot, ka lietotāja ievade vienmēr ir atsaucīga un ka citi atjauninājumi tiek parādīti nekavējoties. Transitions var izmantot, lai izlīdzinātu pārejas starp dažādām dokumenta versijām.

Biežākās problēmas un risinājumi

1. Saderība ar esošajām bibliotēkām

Dažas esošās React bibliotēkas var nebūt pilnībā saderīgas ar Concurrent Mode. Tas var izraisīt neparedzētu uzvedību vai kļūdas. Lai to risinātu, jums vajadzētu mēģināt izmantot bibliotēkas, kas ir īpaši izstrādātas Concurrent Mode vai ir atjauninātas, lai to atbalstītu. Jūs varat arī izmantot `useDeferredValue` hook, lai pakāpeniski pārietu uz Concurrent Mode.

2. Atkļūdošana un profilēšana

Concurrent Mode lietojumprogrammu atkļūdošana un profilēšana var būt sarežģītāka nekā Legacy Mode lietojumprogrammu atkļūdošana un profilēšana. Tas ir tāpēc, ka Concurrent Mode ievieš jaunus konceptus, piemēram, pārtraucamo renderēšanu un prioritātes. Lai to risinātu, jūs varat izmantot React DevTools Profiler, lai analizētu savas lietojumprogrammas veiktspēju un identificētu potenciālās vājās vietas.

3. Datu ielādes stratēģijas

Efektīva datu ielāde ir izšķiroša optimālai veiktspējai Concurrent Mode režīmā. Izvairieties no datu ielādes tieši komponentos, neizmantojot Suspense. Tā vietā, kad vien iespējams, iepriekš ielādējiet datus un izmantojiet Suspense, lai graciozi apstrādātu ielādes stāvokļus. Apsveriet iespēju izmantot bibliotēkas, piemēram, SWR vai React Query, kas ir izstrādātas, lai nevainojami darbotos ar Suspense.

4. Negaidītas pārrenderēšanas

Pārtraucamās dabas dēļ Concurrent Mode režīmā komponenti var pārrenderēties biežāk nekā Legacy Mode. Lai gan tas bieži vien ir labvēlīgs atsaucībai, tas dažkārt var radīt veiktspējas problēmas, ja netiek rūpīgi apstrādāts. Izmantojiet memoizācijas tehnikas (piemēram, `React.memo`, `useMemo`, `useCallback`), lai novērstu nevajadzīgas pārrenderēšanas.

Labākās prakses Concurrent Mode izmantošanai

• Izmantojiet Suspense datu ielādei: Vienmēr izmantojiet Suspense, lai apstrādātu ielādes stāvokļus, ielādējot datus. Tas nodrošina labāku lietotāja pieredzi un ļauj React prioritizēt citus uzdevumus.
• Izmantojiet Transitions nesteidzamiem atjauninājumiem: Izmantojiet Transitions, lai atzīmētu atjauninājumus, kas nav steidzami. Tas ļauj React prioritizēt lietotāja ievadi un citus svarīgus uzdevumus.
• Memoizējiet komponentus: Izmantojiet memoizācijas tehnikas, lai novērstu nevajadzīgas pārrenderēšanas. Tas var uzlabot veiktspēju un samazināt darba apjomu, kas React jāveic.
• Profilējiet savu lietojumprogrammu: Izmantojiet React DevTools Profiler, lai analizētu savas lietojumprogrammas veiktspēju un identificētu potenciālās vājās vietas.
• Rūpīgi testējiet: Rūpīgi testējiet savu lietojumprogrammu, lai nodrošinātu, ka tā pareizi darbojas Concurrent Mode režīmā.
• Pakāpeniski pieņemiet Concurrent Mode: Nemēģiniet pārrakstīt visu savu lietojumprogrammu uzreiz. Tā vietā pakāpeniski pieņemiet Concurrent Mode, sākot ar maziem, izolētiem komponentiem.

React un Concurrent Mode nākotne

Concurrent Mode nav tikai funkcija; tas ir fundamentāls pavērsiens React darbībā. Tas ir pamats nākotnes React funkcijām, piemēram, Server Components un Offscreen Rendering. Tā kā React turpina attīstīties, Concurrent Mode kļūs arvien svarīgāks, veidojot augstas veiktspējas un lietotājam draudzīgas tīmekļa lietojumprogrammas.

Īpaši Server Components ir ļoti daudzsološi. Tie ļauj renderēt komponentus serverī, samazinot JavaScript daudzumu, kas jālejupielādē un jāizpilda klientā. Tas var ievērojami uzlabot jūsu lietojumprogrammas sākotnējo ielādes laiku un uzlabot kopējo veiktspēju.

Offscreen Rendering ļauj iepriekš renderēt komponentus, kas pašlaik nav redzami ekrānā. Tas var uzlabot jūsu lietojumprogrammas uztverto veiktspēju, liekot tai šķist atsaucīgākai.

Noslēgums

React Concurrent Mode ir spēcīgs rīks, lai veidotu augstas veiktspējas un atsaucīgas tīmekļa lietojumprogrammas. Izprotot Concurrent Mode pamatprincipus un ievērojot labākās prakses, jūs varat ievērojami uzlabot savu lietojumprogrammu lietotāja pieredzi un sagatavoties React attīstības nākotnei. Lai gan ir jāņem vērā izaicinājumi, uzlabotās atsaucības, uzlabotās lietotāja pieredzes un labākas veiktspējas priekšrocības padara Concurrent Mode par vērtīgu ieguvumu jebkuram React izstrādātājam. Izmantojiet pārtraucamās renderēšanas spēku un atraisiet pilnu savu React lietojumprogrammu potenciālu globālai auditorijai.